"use client"

import { useState } from "react"
import {
  Search,
  Filter,
  Download,
  Upload,
  MoreHorizontal,
  Eye,
  Edit,
  Trash2,
  FileText,
  Video,
  ImageIcon,
  File,
} from "lucide-react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"

// 修改模拟资源数据
const resourcesData = [
  {
    id: 1,
    title: "高等数学教案",
    description: "计算机专业高等数学教学计划和教案，包括微积分、级数等内容",
    subject: "高等数学",
    grade: "大一",
    type: "文档",
    format: "PDF",
    size: "2.5MB",
    uploadDate: "2023-09-15",
    uploadBy: "王教授",
    downloads: 45,
    tags: ["教案", "高等数学", "微积分"],
    icon: FileText,
  },
  {
    id: 2,
    title: "大学英语阅读材料",
    description: "大学英语四级备考阅读理解练习，包含20篇文章和配套习题",
    subject: "大学英语",
    grade: "大一",
    type: "文档",
    format: "DOCX",
    size: "1.8MB",
    uploadDate: "2023-10-20",
    uploadBy: "李教授",
    downloads: 38,
    tags: ["英语", "四级", "阅读理解"],
    icon: FileText,
  },
  {
    id: 3,
    title: "C++程序设计视频教程",
    description: "C++程序设计基础视频教程，适合计算机专业新生学习",
    subject: "程序设计基础",
    grade: "大一",
    type: "视频",
    format: "MP4",
    size: "850MB",
    uploadDate: "2023-08-05",
    uploadBy: "张教授",
    downloads: 120,
    tags: ["视频", "C++", "编程"],
    icon: Video,
  },
  {
    id: 4,
    title: "数据结构实验指导",
    description: "数据结构课程实验指导手册，包含10个经典数据结构实验",
    subject: "数据结构",
    grade: "大二",
    type: "文档",
    format: "PDF",
    size: "4.2MB",
    uploadDate: "2023-11-10",
    uploadBy: "刘教授",
    downloads: 65,
    tags: ["实验", "数据结构", "算法"],
    icon: FileText,
  },
  {
    id: 5,
    title: "计算机网络拓扑图集",
    description: "计算机网络课程常用网络拓扑结构图集，包含详细说明",
    subject: "计算机网络",
    grade: "大二",
    type: "图片",
    format: "ZIP",
    size: "120MB",
    uploadDate: "2023-07-25",
    uploadBy: "陈教授",
    downloads: 42,
    tags: ["图片", "网络", "拓扑结构"],
    icon: ImageIcon,
  },
  {
    id: 6,
    title: "算法分析习题集",
    description: "算法分析与设计课程习题集，包含各类算法问题及解答",
    subject: "算法分析",
    grade: "大三",
    type: "文档",
    format: "PDF",
    size: "1.5MB",
    uploadDate: "2023-12-01",
    uploadBy: "王教授",
    downloads: 28,
    tags: ["习题", "算法", "分析"],
    icon: FileText,
  },
  {
    id: 7,
    title: "机器学习实战案例",
    description: "机器学习课程实战案例视频，包含多个经典机器学习算法的实现",
    subject: "机器学习",
    grade: "大三",
    type: "视频",
    format: "MP4",
    size: "1.5GB",
    uploadDate: "2023-10-15",
    uploadBy: "周教授",
    downloads: 75,
    tags: ["视频", "机器学习", "案例"],
    icon: Video,
  },
  {
    id: 8,
    title: "数据库系统原理讲解",
    description: "数据库系统原理课程音频讲解，涵盖关系数据库理论和SQL实践",
    subject: "数据库原理",
    grade: "大二",
    type: "音频",
    format: "MP3",
    size: "95MB",
    uploadDate: "2023-09-28",
    uploadBy: "赵教授",
    downloads: 60,
    tags: ["音频", "数据库", "SQL"],
    icon: File,
  },
]

// 资源类型图标映射
const typeIcons: Record<string, any> = {
  文档: FileText,
  视频: Video,
  图片: ImageIcon,
  音频: File,
}

// 资源类型颜色映射
const typeColors: Record<string, string> = {
  文档: "bg-blue-100 text-blue-800 border-blue-300",
  视频: "bg-red-100 text-red-800 border-red-300",
  图片: "bg-green-100 text-green-800 border-green-300",
  音频: "bg-purple-100 text-purple-800 border-purple-300",
}

export function TeachingResources() {
  const [searchTerm, setSearchTerm] = useState("")
  const [selectedSubject, setSelectedSubject] = useState("all")
  const [selectedGrade, setSelectedGrade] = useState("all")
  const [selectedType, setSelectedType] = useState("all")

  // 过滤资源数据
  const filteredResources = resourcesData.filter((resource) => {
    const matchesSearch =
      resource.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
      resource.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
      resource.tags.some((tag) => tag.toLowerCase().includes(searchTerm.toLowerCase()))

    const matchesSubject = selectedSubject === "all" || resource.subject === selectedSubject
    const matchesGrade = selectedGrade === "all" || resource.grade.includes(selectedGrade)
    const matchesType = selectedType === "all" || resource.type === selectedType

    return matchesSearch && matchesSubject && matchesGrade && matchesType
  })

  return (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <div className="flex flex-col justify-between gap-4 sm:flex-row sm:items-center">
            <div>
              <CardTitle>教学资源库</CardTitle>
              <CardDescription>浏览和管理教学资源，支持各种格式的文件</CardDescription>
            </div>
            <div className="flex gap-2">
              <Dialog>
                <DialogTrigger asChild>
                  <Button size="sm" className="gap-1">
                    <Upload className="h-4 w-4" />
                    上传资源
                  </Button>
                </DialogTrigger>
                <DialogContent className="sm:max-w-[525px]">
                  <DialogHeader>
                    <DialogTitle>上传新资源</DialogTitle>
                    <DialogDescription>填写资源信息并上传文件</DialogDescription>
                  </DialogHeader>
                  <div className="grid gap-4 py-4">
                    <div className="grid grid-cols-4 items-center gap-4">
                      <Label htmlFor="title" className="text-right">
                        标题
                      </Label>
                      <Input id="title" placeholder="输入资源标题" className="col-span-3" />
                    </div>
                    <div className="grid grid-cols-4 items-center gap-4">
                      <Label htmlFor="description" className="text-right">
                        描述
                      </Label>
                      <Textarea id="description" placeholder="输入资源描述" className="col-span-3" />
                    </div>
                    <div className="grid grid-cols-4 items-center gap-4">
                      <Label htmlFor="subject" className="text-right">
                        学科
                      </Label>
                      <Select defaultValue="高等数学">
                        <SelectTrigger id="subject" className="col-span-3">
                          <SelectValue placeholder="选择学科" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="高等数学">高等数学</SelectItem>
                          <SelectItem value="大学英语">大学英语</SelectItem>
                          <SelectItem value="程序设计基础">程序设计基础</SelectItem>
                          <SelectItem value="数据结构">数据结构</SelectItem>
                          <SelectItem value="计算机网络">计算机网络</SelectItem>
                          <SelectItem value="操作系统">操作系统</SelectItem>
                          <SelectItem value="数据库原理">数据库原理</SelectItem>
                          <SelectItem value="软件工程">软件工程</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                    <div className="grid grid-cols-4 items-center gap-4">
                      <Label htmlFor="grade" className="text-right">
                        年级
                      </Label>
                      <Select defaultValue="大一">
                        <SelectTrigger id="grade" className="col-span-3">
                          <SelectValue placeholder="选择年级" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="大一">大一</SelectItem>
                          <SelectItem value="大二">大二</SelectItem>
                          <SelectItem value="大三">大三</SelectItem>
                          <SelectItem value="大四">大四</SelectItem>
                          <SelectItem value="研究生">研究生</SelectItem>
                          <SelectItem value="全部年级">全部年级</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                    <div className="grid grid-cols-4 items-center gap-4">
                      <Label htmlFor="tags" className="text-right">
                        标签
                      </Label>
                      <Input id="tags" placeholder="输入标签，用逗号分隔" className="col-span-3" />
                    </div>
                    <div className="grid grid-cols-4 items-center gap-4">
                      <Label htmlFor="file" className="text-right">
                        文件
                      </Label>
                      <Input id="file" type="file" className="col-span-3" />
                    </div>
                  </div>
                  <DialogFooter>
                    <Button type="submit">上传</Button>
                  </DialogFooter>
                </DialogContent>
              </Dialog>
            </div>
          </div>
        </CardHeader>
        <CardContent>
          <div className="mb-6 flex flex-col gap-4 sm:flex-row">
            <div className="flex flex-1 items-center gap-2">
              <div className="relative flex-1">
                <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                <Input
                  type="search"
                  placeholder="搜索资源..."
                  className="pl-8"
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                />
              </div>
              <Select value={selectedSubject} onValueChange={setSelectedSubject}>
                <SelectTrigger className="w-[120px]">
                  <SelectValue placeholder="学科" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">所有学科</SelectItem>
                  <SelectItem value="高等数学">高等数学</SelectItem>
                  <SelectItem value="大学英语">大学英语</SelectItem>
                  <SelectItem value="程序设计基础">程序设计基础</SelectItem>
                  <SelectItem value="数据结构">数据结构</SelectItem>
                  <SelectItem value="计算机网络">计算机网络</SelectItem>
                  <SelectItem value="操作系统">操作系统</SelectItem>
                  <SelectItem value="数据库原理">数据库原理</SelectItem>
                </SelectContent>
              </Select>
              <Select value={selectedGrade} onValueChange={setSelectedGrade}>
                <SelectTrigger className="w-[120px]">
                  <SelectValue placeholder="年级" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">所有年级</SelectItem>
                  <SelectItem value="大一">大一</SelectItem>
                  <SelectItem value="大二">大二</SelectItem>
                  <SelectItem value="大三">大三</SelectItem>
                  <SelectItem value="大四">大四</SelectItem>
                </SelectContent>
              </Select>
              <Select value={selectedType} onValueChange={setSelectedType}>
                <SelectTrigger className="w-[120px]">
                  <SelectValue placeholder="类型" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">所有类型</SelectItem>
                  <SelectItem value="文档">文档</SelectItem>
                  <SelectItem value="视频">视频</SelectItem>
                  <SelectItem value="图片">图片</SelectItem>
                  <SelectItem value="音频">音频</SelectItem>
                </SelectContent>
              </Select>
              <Button variant="outline" size="icon">
                <Filter className="h-4 w-4" />
                <span className="sr-only">筛选</span>
              </Button>
            </div>
          </div>

          <Tabs defaultValue="grid">
            <TabsList className="mb-4">
              <TabsTrigger value="grid">网格视图</TabsTrigger>
              <TabsTrigger value="list">列表视图</TabsTrigger>
            </TabsList>
            <TabsContent value="grid" className="mt-0">
              <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
                {filteredResources.map((resource) => {
                  const IconComponent = resource.icon
                  return (
                    <Card key={resource.id} className="overflow-hidden">
                      <CardHeader className="p-4">
                        <div className="flex items-start justify-between">
                          <div className="flex items-start gap-3">
                            <div
                              className={`flex h-10 w-10 items-center justify-center rounded-lg ${
                                typeColors[resource.type] || "bg-gray-100"
                              }`}
                            >
                              <IconComponent className="h-5 w-5" />
                            </div>
                            <div>
                              <CardTitle className="text-lg">{resource.title}</CardTitle>
                              <CardDescription className="line-clamp-2 mt-1">{resource.description}</CardDescription>
                            </div>
                          </div>
                          <DropdownMenu>
                            <DropdownMenuTrigger asChild>
                              <Button variant="ghost" size="icon">
                                <MoreHorizontal className="h-4 w-4" />
                                <span className="sr-only">操作菜单</span>
                              </Button>
                            </DropdownMenuTrigger>
                            <DropdownMenuContent align="end">
                              <DropdownMenuLabel>操作</DropdownMenuLabel>
                              <DropdownMenuSeparator />
                              <DropdownMenuItem>
                                <Eye className="mr-2 h-4 w-4" />
                                查看详情
                              </DropdownMenuItem>
                              <DropdownMenuItem>
                                <Download className="mr-2 h-4 w-4" />
                                下载资源
                              </DropdownMenuItem>
                              <DropdownMenuItem>
                                <Edit className="mr-2 h-4 w-4" />
                                编辑信息
                              </DropdownMenuItem>
                              <DropdownMenuSeparator />
                              <DropdownMenuItem className="text-red-600">
                                <Trash2 className="mr-2 h-4 w-4" />
                                删除资源
                              </DropdownMenuItem>
                            </DropdownMenuContent>
                          </DropdownMenu>
                        </div>
                      </CardHeader>
                      <CardContent className="p-4 pt-0">
                        <div className="flex flex-wrap gap-2">
                          {resource.tags.map((tag, index) => (
                            <Badge key={index} variant="outline" className="text-xs">
                              {tag}
                            </Badge>
                          ))}
                        </div>
                        <div className="mt-4 grid grid-cols-2 gap-2 text-sm text-muted-foreground">
                          <div>学科: {resource.subject}</div>
                          <div>年级: {resource.grade}</div>
                          <div>格式: {resource.format}</div>
                          <div>大小: {resource.size}</div>
                        </div>
                      </CardContent>
                      <CardFooter className="flex justify-between border-t p-4">
                        <div className="text-xs text-muted-foreground">
                          上传于 {resource.uploadDate} 由 {resource.uploadBy}
                        </div>
                        <div className="text-xs text-muted-foreground">下载次数: {resource.downloads}</div>
                      </CardFooter>
                    </Card>
                  )
                })}
              </div>
            </TabsContent>
            <TabsContent value="list" className="mt-0">
              <div className="rounded-md border">
                <table className="w-full">
                  <thead>
                    <tr className="border-b">
                      <th className="px-4 py-3 text-left font-medium">资源名称</th>
                      <th className="px-4 py-3 text-left font-medium">类型</th>
                      <th className="px-4 py-3 text-left font-medium">学科</th>
                      <th className="px-4 py-3 text-left font-medium">年级</th>
                      <th className="px-4 py-3 text-left font-medium">大小</th>
                      <th className="px-4 py-3 text-left font-medium">上传日期</th>
                      <th className="px-4 py-3 text-left font-medium">下载次数</th>
                      <th className="px-4 py-3 text-right font-medium">操作</th>
                    </tr>
                  </thead>
                  <tbody>
                    {filteredResources.map((resource) => {
                      const IconComponent = resource.icon
                      return (
                        <tr key={resource.id} className="border-b">
                          <td className="px-4 py-3">
                            <div className="flex items-center gap-3">
                              <div
                                className={`flex h-8 w-8 items-center justify-center rounded-lg ${
                                  typeColors[resource.type] || "bg-gray-100"
                                }`}
                              >
                                <IconComponent className="h-4 w-4" />
                              </div>
                              <div>
                                <div className="font-medium">{resource.title}</div>
                                <div className="text-xs text-muted-foreground">{resource.format}</div>
                              </div>
                            </div>
                          </td>
                          <td className="px-4 py-3">
                            <Badge variant="outline">{resource.type}</Badge>
                          </td>
                          <td className="px-4 py-3">{resource.subject}</td>
                          <td className="px-4 py-3">{resource.grade}</td>
                          <td className="px-4 py-3">{resource.size}</td>
                          <td className="px-4 py-3">{resource.uploadDate}</td>
                          <td className="px-4 py-3">{resource.downloads}</td>
                          <td className="px-4 py-3 text-right">
                            <div className="flex justify-end gap-2">
                              <Button variant="ghost" size="icon">
                                <Eye className="h-4 w-4" />
                                <span className="sr-only">查看</span>
                              </Button>
                              <Button variant="ghost" size="icon">
                                <Download className="h-4 w-4" />
                                <span className="sr-only">下载</span>
                              </Button>
                              <DropdownMenu>
                                <DropdownMenuTrigger asChild>
                                  <Button variant="ghost" size="icon">
                                    <MoreHorizontal className="h-4 w-4" />
                                    <span className="sr-only">操作菜单</span>
                                  </Button>
                                </DropdownMenuTrigger>
                                <DropdownMenuContent align="end">
                                  <DropdownMenuItem>
                                    <Edit className="mr-2 h-4 w-4" />
                                    编辑信息
                                  </DropdownMenuItem>
                                  <DropdownMenuItem className="text-red-600">
                                    <Trash2 className="mr-2 h-4 w-4" />
                                    删除资源
                                  </DropdownMenuItem>
                                </DropdownMenuContent>
                              </DropdownMenu>
                            </div>
                          </td>
                        </tr>
                      )
                    })}
                  </tbody>
                </table>
              </div>
            </TabsContent>
          </Tabs>
        </CardContent>
      </Card>
    </div>
  )
}
